<template>
  <HomeHeader></HomeHeader>
  <HomeSwiper :carousels="carousels"></HomeSwiper>
  <CategoryList></CategoryList>
  <Goods title="新品上线" :goods="newGoodses"></Goods>
  <Goods title="热门商品" :goods="hotGoodses"></Goods>
  <Goods title="最新推荐" :goods="recommendGoodses"></Goods>
</template>
<script setup>
import {fetchIndexInfo} from '@/api/home';
const carousels = ref([]);
const newGoodses = ref([]);
const recommendGoodses = ref([]);
const hotGoodses = ref([]);
onMounted(async ()=>{
 const data =  await fetchIndexInfo();
 carousels.value = data.carousels;
 newGoodses.value = data.newGoodses;
 recommendGoodses.value = data.recommendGoodses;
 hotGoodses.value = data.hotGoodses;
})

</script>
<style lang="less">
.title{
  color:@primary-color;
}
</style>
